<template>
    <el-container style="height: 100%;background-color: #fafafa;">
      <el-main>
        <el-row type="flex" class="row-bg" justify="center">
          <el-col :span="11" :xl="7" :lg="6">
            <h2>欢迎来到后台管理系统</h2>
            <el-image :src="require('@/assets/login.jpg')" class="ima" id="image"></el-image>
            <p>扫描二维码添加微信</p>
          </el-col>
          <el-col :span="1">
            <el-divider direction="vertical"></el-divider><!--分割线-->
          </el-col>

          <el-col :span="11"  :xl="7" :lg="6">
            <el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="100px">
              <el-form-item label="用户名" prop="username">
                <el-input v-model="loginForm.username" class="input"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input v-model="loginForm.password" class="input" show-password></el-input>
              </el-form-item>
              <el-form-item label="验证码" prop="code">
                <el-input v-model="loginForm.code" class="input_1"></el-input>
                <el-image :src="captchaImg" class="captchaImg" @click="getCaptcha">
                  <div slot="error" class="image-slot">
                    <el-button class="captchaImg" @click="getCaptcha">获取验证码</el-button>
                  </div>
                </el-image>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" id="login" @click="submitForm('loginForm')">登录</el-button>
                <el-button @click="resetForm('loginForm')">重置</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </el-main>

      <el-footer>
        <div style="line-height: 60px">
            <span>Developed by Zhang Lisong&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <a id="a" href="http://beian.miit.gov.cn/" target="_blank">津ICP备2023000580号</a>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        </div>
      </el-footer>
    </el-container>
</template>
<script>
  import qs from 'qs'
  export default {
    name: "Login",
    data() {
      return {
        loginForm: {
          username: 'guest',
          password: '123456',
          code: '',
          key: '' //用于后台识别哪个用户的验证码
        },
        rules: {
          username: [
            { required: true, message: '用户名不能为空', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '密码不能为空', trigger: 'blur' }
          ],
          code: [
            { required: true, message: '请输入验证码', trigger: 'blur' },
            { min: 5, max: 5, message: '长度为5个字符', trigger: 'blur' }
          ],
        },
        captchaImg:null
      };
    },
    methods: {
      submitForm(formName) {  //表单提交验证
        document.getElementById('login').blur()  //让按钮失焦，否则按下回车会自动执行按钮点击事件
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.axios.post('/login?'+qs.stringify(this.loginForm)).then(res=>{
              const jwt=res.headers['authorization']
              this.$store.commit('SET_TOKEN',jwt) //将jwt存储到store里的token作为用户凭证
              this.$router.push('/index')
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      getCaptcha(){ //从后端获取验证码
        this.axios.get('/captcha').then(res=>{
          this.loginForm.key=res.data.data.key;
          this.captchaImg=res.data.data.captchaImg;
          this.loginForm.code="";
        })
      },
      handKeyCode(e) {  //用于监听键盘按下回车键进行登录
        let key = e.keyCode;
        if (key === 13) {
          this.submitForm('loginForm');
        }
      }
    },
    created() {
      this.getCaptcha();
      //添加监听器，用于监听键盘按下回车键进行登录
      window.addEventListener('keydown',this.handKeyCode,true)
    }
  }
</script>

<style scoped>
  .el-row{
    height: 100%;
    display: flex;
    align-items: center;  /*上下居中*/
    text-align: center;   /*文字居中*/
    justify-content: center;
  }
  .el-divider{
    height: 300px;
  }
  .captchaImg{  /*验证码*/
    float: right;
    border-radius: 3px;
    height: 40px;
    width: 110px;
  }
  #a{
    text-decoration: none;
    color: rgba(0,0,0,0.5);
  }
  .el-footer{
    font-size: small;
    text-align: center;
    color: rgba(0,0,0,0.5);
  }
  .ima{
    height: 180px;
    width: 180px;
  }
  .el-form{
    width: 372px;
  }
  .input{
    width: 270px;
  }
  .input_1{
    width: 150px;
    float: left;
  }
</style>
